<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="admin.*"%>
<%
	ComputingDays cd=new ComputingDays();
	long days=cd.computingdays("2021-05-20 00:00:00");
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="static/img/tx.png" type="image/x-ico"\>
    <title>南至</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        boby {
            min-height:100vh;
            min-width: 1000px;
            overflow: hidden;
        }
        video{
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            z-index: -100;
        }
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        } 
        #bodyBox{
            position: absolute;
            height: 100%;
            width: 100%;
            background-color:rgba(0, 0, 0, 0.1);
        }
        #mainBox{
            position: absolute;
            width: 700px;
            height: 100%;
            /* margin: 0 auto; */
            left:50%;
            transform: translate(-50%,0);
            /* background-color:rgba(61, 61, 61, 0.8); */
        }
        #mainBox-head{
            position: relative;
            width: 100%;
            height: 33.3%;
            background-image: url("static\\img\\headbg.jpg");
            /* border-top-left-radius: 30px;
            border-top-right-radius:30px; */
            border-radius: 30px;
        }
        #mainBox-headauthor{
            position: absolute;
            width: 128px;
            height: 128px;
            left: 50%;
            top: 35%;
            transform: translate(-50%,-50%);
            /* text-align: center; */
        }
        @keyframes rotate{
            0%{
                transform:rotate(0deg);
                }
            100%{
                transform:rotate(360deg);
            }
        }
  
        #headtx{
            animation-name: rotate;
            animation-duration: 10s;
            animation-fill-mode: backwards;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-play-state:  paused; 
        }
        #headmusicState{
            display:none;
        }
        #mainBox-headauthor:hover #headmusicState{
            display:inline-block;
        }
        #mainBox-headauthor img{
            position: absolute;
            height: 100%;
            width: 100%;
        }
        #authorName{
            /* color:rgb(255, 255, 255); */
            position: absolute;
            top: 68%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 20px;
            font-weight: 500;
        }
        #mainBox-head ul{
            position: absolute;
            bottom: 6%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        #mainBox-head ul li{
            list-style: none;
            float: left;
            color: white;
            margin: 0 30px;
        }
        #mainBox-head ul li:hover{
            cursor: pointer;
        }
        #currentLi{
            border-bottom: 2px solid rgb(255, 94, 0); 
        }

        #mainBox-main{
            position: absolute;
            top:30%;
            width: 100%;
            height: 70%;
            background-color:rgba(61, 61, 61, 0.8);
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
        }


        #rightBox{
            position: absolute;
            height:100%;
            transition: all 0.2s ease;
        }
        #rightBoxMain{
            position: absolute;
            left: 0;
            height: 100%;
            background-color:rgba(61, 61, 61, 0.8);
            border-top-right-radius:30px;
            border-bottom-right-radius: 30px;
            overflow: hidden;
        }
        #manage{
            position: relative;
            width: 100%;
            height: 10%;
            /* background-color:rgb(194, 34, 34); */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        #manage a{
            position: absolute;
            bottom: 30%;
            text-decoration: none;
            color:white;
            font-size:16px;
            font-weight:300;
        }
        #manage a:hover{
            color: rgb(233, 97, 19);
        }
        #manage a:first-child{
            left: 10%;
        }
        #manage a:last-child{
            right: 10%;
        }
        #lyricsBox{
            position: relative;
            top:5%;
            height: 400px;
            width: 100%;
            overflow: hidden;
            text-align: center;
            color: rgb(255, 255, 255);
        }
        #lyrics{
            position: absolute;
            width: 100%;
            overflow: auto;
            text-align: center;
            font-weight:10;
            transition: all 0.4s ease;
        }
        #songName{
            font-size:25px;
            font-weight:10;
        }
        #songAuthor{
            font-size: 16px;
        }
        #overflowH{
            position: absolute;
            width: 100%;
            height: 318px;
            overflow: auto;
        }
        #overflowH::-webkit-scrollbar{
            height: 0;
            width: 0;
        }
        #emptyLine{
            display:block;
            height: 20px;
        }
        #emptyLine2{
            display:block;
            height: 10px;  
        }
        #mediaBox{
            position: absolute;
            top:70%;
            height: 32px;
            width: 100%;
            /* border-bottom: 1px solid rgb(201, 201, 201); */
            /* background-color:red; */
        }
        #mediaBox span{
            display: inline-block;
            height: 32px;
            width: 32px;
            margin-left: 60px;
            border-radius:10px;
        }
        #mediaBox span:hover{
            background-color:white;
        }
        #mediaBox span img{
            position: relative;
            height: 100%;
            width: 100%;
        }
        
        #rightBoxMain #bq{
            position: absolute;
            bottom: 10%;
            left: 50px;
            color: rgb(255, 255, 255);
            font-size:12px;
            font-weight:300;

        }
        #days{
            position: absolute;
            bottom: 5%;
            left: 100px;
            color: rgb(255, 255, 255);
            font-size:12px;
            font-weight:300;
        }
        
        #toRight{
            position: absolute;
            right: 0;
            height: 100%;
            width: 64px;
        }
        #toRightImg{
            display:none;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(0,-50%);
        }
        #toRight:hover #toRightImg{
            display: block;
        }


        #blogLi{
            position: relative;
            top: 50px;
            /* border-top: 2px solid rgb(85, 78, 78); */
        }
        #bloglis{
            list-style: none;
            position: relative;
            height: 120px;
            margin-top:10px;
            background-color:transparent;
            overflow: hidden;
        }
        #bloglis img{
            position: absolute;
            height: 90px;
            width: 160px;
            left: 30px;
            top: 50%;
            transform: translate(0,-50%);
        }
        #bloglis h3{
            position: absolute;
            font-weight: 500;
            font-size: 21px;
            left: 200px;
            width: 450px;
            height: 25px;
            color:rgb(230, 230, 230);
            text-overflow: ellipsis;
            white-space: nowrap; 
            overflow: hidden;
            text-align: center;

        }
        #blogdescription{
            position: absolute;
            top: 33px;
            left: 200px;
            width: 450px;
            height: 52px;
            overflow: hidden;
        }
        #blogdescription p{
            text-indent: 32px;
            margin-top:8px;
            text-overflow: ellipsis;
            color:rgb(155, 155, 155);
        }
        #blogbottom{
            position: absolute;
            bottom: 15px;
            width: 450px;
            height: 20px;
            left: 200px;

        }
        #blogbottom span{
            display: inline-block;
            position: absolute;
            color: rgb(133, 133, 133);
            font-size:8px;
        }
        #blogauthor{
            left: 0;
        }
        .blogtime{
            right: 0;
        }
        #bloglis:hover{
            background-color:rgba(148, 148, 148,0.2);
            cursor: pointer;
        }
        #bloglis:hover #blogdescription p{
            color: #d365ff;
        } 
        #bloglis:hover #blogtitle{
            color: #d365ff;
        } 
        /* #bloglis:hover #blogbottom span{
            color: #d365ff;
        } */
        #changePage{
            position: absolute;
            bottom:30px;
            height: 30px;
            width: 200px;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #changePage ul{
            list-style: none;
        }
        #changePage ul li{
            float: left;
            height: 30px;
            width: 30px;
            /* background-color:blue; */
            text-align: center;
            line-height:36px;
            margin-left: 20px;
            color:white;
        }
        #changePage ul li:hover{
            cursor: pointer;
            background-color:rgba(148, 148, 148,0.2);
            color: #d365ff;
        }
        .currentPage{
            background-color:rgba(148, 148, 148,0.2);
            color: #d365ff;
        }
        #mainBoxChange{
            position: absolute;
            height: 100%;
            width: 100%;
        }
        @font-face { 
            font-family: "roud666";
            src: url("static\\font\\Harley.ttf"); 
        }
        #mainDescribe{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            transform: translate(-50%,-50%);
            text-indent: 32px;
            line-height:50px;
            font-size: 16px;
            color:rgb(202, 202, 202);
            font-family:"roud666";
        }
        
        #resources{
            position: absolute;
            top: 50px;
            width: 500px;
            height: 380px;
            left: 50%;
            transform: translate(-50%,0);
        }
        #resources ul{
            position: relative;
            width: 100%;
            height: 100%;
        }
        #resources ul li{
            list-style: none;
            position: relative;
            height: 32%;
            margin-top: 1%;
            width: 100%;
            border-radius: 30px;
            overflow: hidden;
            color: white;
        }
        #resources ul li:hover{
            background-color:rgba(170, 170, 170,0.3);
        }
        .rstitle{
            position: absolute;
            top: 30px;
            width: 100%;
            text-align: center;
        }
        .rscode{
            position: absolute;
            bottom: 30px;
            width: 100%;
            text-align: center;
        }
        .rscode b{
            color:red;
        }

        #changePage2{
            position: absolute;
            bottom:30px;
            height: 30px;
            width: 200px;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #changePage2 ul{
            list-style: none;
        }
        #changePage2 ul li{
            float: left;
            height: 30px;
            width: 30px;
            /* background-color:blue; */
            text-align: center;
            line-height:36px;
            margin-left: 20px;
            color:white;
        }
        #changePage2 ul li:hover{
            cursor: pointer;
            background-color:rgba(148, 148, 148,0.2);
            color: #d365ff;
        }
    </style>
</head>
<body>
    <video id="v1" autoplay loop muted>
        <source src="static/bgmov/sky.mp4" type="video/mp4"/>
    </video>
    <audio src="static\\audio\\总有一天你会出现在我身边.mp3" hidden="true" loop="true"></audio>
    <div id="bodyBox"></div>
    <div id="rightBox">
        <div id="rightBoxMain">
            <div id="manage">
                <a href="login.jsp">后台管理</a>
                <a href="login.jsp">申请管理</a>
            </div>
            <div id="lyricsBox">
                <p id="songName"></p>
                <h6 id="emptyLine2"></h6>
                <p id="songAuthor">/p>
                <h6 id="emptyLine2"></h6>
                <div id="overflowH">
                    <div id="lyrics"></div>
                </div>
            </div>
            <div id="mediaBox">
                <span>
                    <a href="#">
                        <img src="static\\img\\weibo.png"/>
                    </a>
                </span>
                <span>
                    <a href="#">
                        <img src="static\\img\\csdn.png"/>
                    </a>
                </span>
                <span>
                    <a href="#">
                        <img src="static\\img\\email.png"/>
                    </a>
                </span>
            </div>
            <p id="bq">Copyright © www.roud.top All Rights Reserved.</p>
            <p id="days">本站建站至今已运行 <%= days %> 天</p>
        </div>
        <div id="toRight">
            <img id="toRightImg" src="static\\img\\goright.png"/>
        </div>
    </div>
    <div id="mainBox">
        <div id="mainBox-main">
            <div id="mainBoxChange">
                <ul id="blogLi">

                </ul>
                <div id="changePage">
                    <ul>
                        <li id="back"><</li>
                        <li class="currentPage" id="Pagenumber">1</li>
                        <li id="next">></li>
                    </ul>
                </div>
            </div>

            <div id="mainBoxChange" style="display: none;">
                <p id="mainDescribe">各位看官老爷们,大家好,我是练习时长两年半的个人练习生ROUD,喜欢唱、跳、rap、篮球。
                    本博客为热心网友Roud（ROUD）的个人博客，本人专注于Java及Python开发，博客主要记录自己平时的学习总结、问题解决等相关内容及各类精品资源分享，希望与大家共同成长和进步！<br>
                    Hello, all of you, I'm a two and a half year long individual trainee roud. I like singing, dancing, rap and basketball. This blog is dedicated to the development of Java and python. I mainly record my usual learning summary, problem solving and other related content and share all kinds of excellent resources. I hope to grow and progress together with you!
                </p>
            </div>
            
         
            <div id="mainBoxChange" style="display: none;">
                <div id="resources">
                    <ul id="rsul">

                    </ul>
                </div>

                <div id="changePage2">
                    <ul>
                        <li id="back2"><</li>
                        <li class="currentPage2" id="Pagenumber2">1</li>
                        <li id="next2">></li>
                    </ul>
                </div>

            </div>
            
        </div>
        <div id="mainBox-head">
            <div id="mainBox-headauthor">
                <img id="headtx" src="static\\img\\tx.png">
                <img id="headmusicState" src="static\img\stop.png">
            </div>
            <p id="authorName">热心网友Roud</p>
            <ul>
                <li id="currentLi">博客</li>
                <li>简介</li>
                <li>资源</li>
            </ul>
        </div>

  </div>
      <script> 
    function f1(){
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        var flag = 1;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = 0;
                break;
            }
        }
        return flag;
    }
    var temp=parseInt(f1());
    if(temp==0){
        location.href="phoneClient.html";
    }
    </script>
  <script>
    var authorName=document.querySelector("#authorName");
    function colorChanged(){
        var r=parseInt(Math.random()*256);
        var g=parseInt(Math.random()*256);
        var b=parseInt(Math.random()*256);
        var rgb="rgba("+r+","+g+","+b+")";
        authorName.style.color=rgb;
    }
    setInterval(colorChanged,100);

    var headLis=document.querySelectorAll("#mainBox-head ul li");
    var mainBoxChanges=document.querySelectorAll("#mainBoxChange");
    for(var i=0;i<headLis.length;i++){
        headLis[i].setAttribute("index",i);
    }
    for(var i=0;i<headLis.length;i++){
        headLis[i].addEventListener("click",function(){
            for(var j=0;j<headLis.length;j++){
                headLis[j].removeAttribute("id");
                mainBoxChanges[j].style.display="none";
            }
            this.setAttribute("id","currentLi");
            var index=this.getAttribute("index");
            mainBoxChanges[index].style.display="block";

        })
    }
  </script>

  <script>
      var flag=0;
      var audio = document.querySelector("audio");
      var headtx=document.querySelector("#headtx");
      var headmusicStateImg=document.querySelector("#headmusicState");
      headmusicStateImg.addEventListener("click",function(){
          if(flag==0){
              headmusicStateImg.src="static\\img\\start.png";
              flag=1;
              audio.play();
              headtx.style.animationPlayState="running";
          }
          else if(flag==1){
            headmusicStateImg.src="static\\img\\stop.png";
            flag=0;
            audio.pause();
            headtx.style.animationPlayState="paused";
          }
      })
  </script>

  <script>
    //   function rightW(){
    var rightBox=document.querySelector("#rightBox");
    var body=document.querySelector("body");
    var rightBoxMain=document.querySelector("#rightBoxMain");
    var mainBox=document.querySelector("#mainBox");
    var w1=body.offsetWidth;
    var w2=mainBox.offsetWidth;
    var w3=(w1-w2)/2;
    var w3px=w3+"px";
    rightBox.style.width=w3px;
    var w4=-w3+64;
    rightBoxMain.style.width=Math.abs(w4)+"px";
    var w4px=w4+"px";
    rightBox.style.left=w4px;

    var temp=0;
    var toRightImg=document.querySelector("#toRightImg");
    toRightImg.addEventListener("click",function(){
        if(temp==0){
            rightBox.style.left="0";
            toRightImg.src="static\\img\\goleft.png"
            temp=1;
        }
        else if(temp==1){
            rightBox.style.left=w4px;
            toRightImg.src="static\\img\\goright.png"
            temp=0;
        }

    })
  </script>
  <script>
        songData = {
            songName: "总有一天你会出现在我身边",
            songAuthor:"南至",
            songLyrics:'[00:00.000]光芒捧起你的脸[00:03.440]我飞在云层间[00:06.689]狂奔向你不停歇[00:12.689]你说最好的人会到身边[00:19.689]此刻我也这样想[00:25.939]你终将看到我最美模样，出现[00:39.189]等这一切，都被你了解，十指错落相牵[00:52.440]跨越时间，再没有分别，携手走过明天[01:05.439]总会有些，幸运会出现，我等待这一天'}
        var lyrics=document.querySelector("#lyrics");
        var songAuthor=document.querySelector("#songAuthor");
        var songName=document.querySelector("#songName");
        songName.innerHTML=songData.songName;
        songAuthor.innerHTML=songData.songAuthor;

        var g=songData.songLyrics;
        if(g==null){
            lyrics.innerHTML="";
        }else{
            var exp = /[\u4e00-\u9fa5]+\，?[\u4e00-\u9fa5]*\，?[\u4e00-\u9fa5]*/g; 
            var exp2=/\[{1}(.*?)\]{1}/g;
            var g1=g.match(exp);
            var g2=g.match(exp2);
            var str="";
            for(var i=0;i<g2.length;i++){
                var g3=g2[i].split(':')[1].split('.')[0];
                var g4=g2[i].split(':')[0].split('[0')[1]*60;
                g5=parseInt(g3)+parseInt(g4);
                str+="<p"+" id='c"+g5+"'>"+g1[i]+"</p>"+'<h6 id="emptyLine"></h6>';
            }
            lyrics.innerHTML=str;
        }


        audio.addEventListener("timeupdate",function(e){//监听，获取音频当前进度时间
            var lyricsps=lyrics.querySelectorAll('p');
            var audioCurrentime=parseInt(this.currentTime);
            var totaltime=parseInt(audio.duration);
            if(document.getElementById("c"+audioCurrentime)){
                for(var i=0;i<lyricsps.length;i++){
                    lyricsps[i].style.color="white";
                }
                document.getElementById("c"+audioCurrentime).style.color="rgb(255, 94, 0)";
                if((document.getElementById("c"+audioCurrentime).offsetTop)>122){
                    var lyricsMove=document.getElementById("c"+audioCurrentime).offsetTop-122;
                    lyrics.style.transform="translateY(-"+lyricsMove+"px)";
                };
                if(audioCurrentime<=1){
                    lyrics.style.transform="translateY(0)";
                }
            }



    })
</script>

<script>
<%
	getBlogData gbd=new getBlogData();
	List<Blog> blogData=gbd.getData();

%>
    blogdata_initial=<%=blogData%>
    var blogul=document.querySelector("#blogLi");
    blogdata=blogdata_initial.reverse();


    function f1(){
        var str='';
        var number=parseInt(document.querySelector("#Pagenumber").innerHTML);
        var maxpage=0;
        if((number*3)>parseInt(blogdata.length)){
            maxpage=parseInt(blogdata.length)-1;
        }else{
            maxpage=number*3-1;
        }
        var minpage=number*3-3;


        for(var i=minpage;i<=maxpage;i++) {
            var describe='';
            if((blogdata[i].describe).slice(56,57)!=''){
                var describe=(blogdata[i].describe).slice(0,52)+'...';
            }else{
                var describe=blogdata[i].describe;
            }
            str+=  '<a href="myblog.jsp?id='+i+'" target="_blank"><li id="bloglis"><img id="blogcover" src='+blogdata[i].coverurl+'/><h3 id="blogtitle">'+blogdata[i].title+'</h3><div id="blogdescription"><p>'+describe+'</p></div><div id="blogbottom"><span class="blogauthor">'+blogdata[i].author+'</span><span class="blogtime">'+blogdata[i].time+'</span></div></li></a>';
        }
        blogul.innerHTML=str;
    }
    f1();

    var pages=document.querySelectorAll("#changePage ul li");
    for(var i=0;i<pages.length;i++){
        pages[i].addEventListener("click",function(){
            for(var j=0;j<pages.length;j++){
                pages[j].removeAttribute("class");
            }
            this.setAttribute("class","currentPage");
        })
    }

    var back=document.querySelector("#back");
    var next=document.querySelector("#next");
    var pagenumber=document.querySelector("#Pagenumber");
    // var number=pagenumber.innerHTML;
    back.addEventListener("click",function(){
        var number=parseInt(document.querySelector("#Pagenumber").innerHTML);
        if(number==1){
            alert("已经是第一页啦~");
        }else{
            number-=1;
            pagenumber.innerHTML=number;
            f1();
        }
    })
    next.addEventListener("click",function(){
        var number=parseInt(document.querySelector("#Pagenumber").innerHTML);
        var datalenght=Math.ceil(parseInt(blogdata.length)/3);
        if(number==datalenght){
            alert("已经是最后一页啦~");
        }else{
            number+=1;
            pagenumber.innerHTML=number;
            f1();
        }
    })

</script>
<script>
<% 
	GetResources grs=new GetResources();
	List<Resources> ls=grs.getData();
%>
    var rsinitialData=<%= ls %>;
    var rsData=rsinitialData.reverse();
    var rsul=document.querySelector("#rsul");
    


    function f2(){
        var rsStr='';
        var number2=parseInt(document.querySelector("#Pagenumber2").innerHTML);
        var maxpage2=0;
        if((number2*3)>parseInt(rsData.length)){
            maxpage2=parseInt(rsData.length)-1;
        }else{
            maxpage2=number2*3-1;
        }
        var minpage2=number2*3-3;


        for(var i=minpage2;i<=maxpage2;i++) {
                 rsStr+='<a href="'+rsData[i].url+'" title="点击我试试~"><li><p class="rstitle">'+rsData[i].title+'</p><p class="rscode">提取码:<b>'+rsData[i].code+'</b></p></li></a>';
        }
        rsul.innerHTML=rsStr;
    }
    f2();

    var pages2=document.querySelectorAll("#changePage2 ul li");
    for(var i=0;i<pages2.length;i++){
        pages2[i].addEventListener("click",function(){
            for(var j=0;j<pages2.length;j++){
                pages2[j].removeAttribute("class");
            }
            this.setAttribute("class","currentPage");
        })
    }

    var back2=document.querySelector("#back2");
    var next2=document.querySelector("#next2");
    var pagenumber2=document.querySelector("#Pagenumber2");
    // var number=pagenumber.innerHTML;
    back2.addEventListener("click",function(){
        var number2=parseInt(document.querySelector("#Pagenumber2").innerHTML);
        if(number2==1){
            alert("已经是第一页啦~");
        }else{
            number2-=1;
            pagenumber2.innerHTML=number2;
            f2();
        }
    })
    next2.addEventListener("click",function(){
        var number2=parseInt(document.querySelector("#Pagenumber2").innerHTML);
        var datalenght2=Math.ceil(parseInt(rsData.length)/3);
        if(number2==datalenght2){
            alert("已经是最后一页啦~");
        }else{
            number2+=1;
            pagenumber2.innerHTML=number2;
            f2();
        }
    })

</script>
</body>
</html>